<!--
路径
    beginPath()
    closePath()
画笔
    lineWidth
    fillStyle
    strokeStyle
    fill()
    stroke()
线段
    moveTo(x,y)
    lineTo(x,y)

拓展
    1）起点问题
        beginPath() + lineTo(x,y) 等同于 moveTo(x,y)
    2）多条不同的线段
        moveTo(x,y)新的起点，用来绘制多条不同的线段
    3）折线
        lineTo(x,y)同时定义多个点，点之间相连
        除非路径提前闭合或存在moveTo新起始点，它们才不会相连
    4）闭合
        closePath()可以让起点与终点连接起来，完全闭合
        注意，将终点设置为起点坐标也可以闭合，但不是完全闭合，因为连接处末端也有单独的样式设置
-->
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .canvas {
        display: block;
        margin: 25px auto;
        border: 1px solid #aaa;
    }
</style>

<canvas class="canvas">当前浏览器不支持Canvas，请升级浏览器版本或更换浏览器！</canvas>

<script>
    const cvs = document.querySelector(".canvas");
    cvs.width = 1000;
    cvs.height = 650;
    const ctx = cvs.getContext("2d");

    // 线段
    ctx.beginPath();
    // ctx.moveTo(100, 50);
    ctx.lineTo(100, 50);
    ctx.lineTo(500, 50);
    ctx.lineTo(200, 300);
    ctx.lineTo(100, 50);
    // ctx.closePath();

    // 画笔设置
    ctx.lineWidth = 10;
    // ctx.fillStyle = "gold";
    // ctx.fill();
    ctx.strokeStyle = "rgba(255,0,0,.3)";
    ctx.stroke();
</script>
